<template>
  <view class="container">
    <view class="item">
      <view class="pulse-bubble pulse-bubble-1"></view>
      <view class="pulse-bubble pulse-bubble-2"></view>
      <view class="pulse-bubble pulse-bubble-3"></view>
    </view>

    <view class="text">蓝牙连接中...</view>
  </view>
</template>

<script>
export default {
  name: 'loading-pulse',
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
/* pulse */
.container {
  width: 150rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pulse-bubble {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #007aff;
}

.pulse-bubble-1 {
  background: #1fa2ff;
  animation: pulse 0.4s ease 0s infinite alternate;
}

.pulse-bubble-2 {
  background: #12d8fa;
  animation: pulse 0.4s ease 0.2s infinite alternate;
}

.pulse-bubble-3 {
  background: #29ffc6;
  animation: pulse 0.4s ease 0.4s infinite alternate;
}
.text {
  font-size: 12px;
  color: #9b9a9a;
}

@keyframes pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0.25;
    transform: scale(0.75);
  }
}
</style>
